<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app1">
    <p>{{rawhtml}}</p>
    <p>hello <span v-html="rawhtml"></span></p>

</div>

<div id="app2">
    <button @click="alert" :href="url">test click event</button>
</div>


<div id="app3">
    <p>{{message}}</p>
    <p>{{msg()}}</p>
    <p>{{reverseMessage}}</p>
    <input v-model="message">
    <p>{{now}}</p>
    <p>{{now2()}}</p>
</div>

<hr>

<div id="app4">
    <p>full name : {{fullName}}</p>
    <input v-model="firstName">
    <input v-model="lastName">
</div>


<script>

    var app1 = new Vue({
        el: "#app1",
        data: {
            rawhtml: "<span style='color:red'>red font</span>"
        }
    });

    var app2 = new Vue({
        el: "#app2",
        data: {
            url: "https://www.baidu.com"
        },
        methods: {
            alert: function () {
                alert("123123");
            }
        }
    });


    var app3 = new Vue({
        el: "#app3",
        data: {
            message: ""
        },
        computed: {
            reverseMessage: function () {
                return this.message.split("").reverse().join("");
            },
            now: function () {
                return Date.now();
            }
        },
        methods: {
            msg: function () {
                return this.message;
            },
            now2: function () {
                return Date.now();
            }
        }
    });

    var app4 = new Vue({
        el: "#app4",
        data: {
            firstName: "",
            lastName: ""
        },
        computed: {
            fullName:{
                get: function () {
                    return this.firstName + " " + this.lastName;
                },
                set: function (fullName) {
                    var names = fullName.split(" ");
                    if (names.length == 1) {
                        this.firstName = names[0];
                    } else if (names.length == 2) {
                        this.firstName = names[0];
                        this.lastName = names[1];
                    }
                }
            }
        }
    });

</script>


</body>
</html>